<style scoped lang="scss">
.search_div1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search {
        flex: 1;
    }

    .icon1 {
        font-size: 30px;
        margin: 5px;
    }

    .spanseach {
        color: #3087ea;
        margin: 5px;
    }
}

// 搜索历史
.history_box {
    .history {
        color: #3087ea;
        margin-left: 20px;
        margin-top: 10px;
    }

    .historyspan {
        padding-left: 20px;
        padding-top: 10px;
    }

    .iconsearch {
        float: right;
        padding-right: 20px;
        color: #000;
    }
}

// 热门搜索
.popular_box {
    .popular {
        color: #3087ea;
        margin-left: 20px;
        margin-top: 10px;
    }

    .re_box {
        display: flex;
        flex-wrap: wrap;
        .re {
           width: 22%;
           padding: 5px;
           margin: 5px;
           margin-left: 20px;
           background: #ccc;
           text-align: center;
        }
    }

}


//结果页面
.result_box {
    p{
        color: #3489ea;
        margin-left: 10px;
        margin-top: 10px;
        font-size: 24px;
        line-height: 50px;
    }
    .aabox {
        h5 {
            padding: 8px;
        }
    }
}
</style>
<template>
    <div class="box">
        <div class="search_div1">
            <van-icon class="icon1" name="arrow-left" @click="fanhui" />
            <van-search class="search" shape="round" background="#fff" placeholder="请输入搜索关键词" v-model="wd"
                @search="onSearch" />
            <div class="spanseach" @click="onSearch">搜索</div>
        </div>
        <!-- 搜索历史 -->
        <div class="history_box" v-show="!isSearching">
            <h3 class="history">搜索历史</h3>
            <p v-for="(item, index) in searchStore.searchHistory" :key="index" class="historyspan">
                {{ item }}
                <van-icon name="cross" class="iconsearch" @click="() => quxaio(item)" />
            </p>
        </div>
        <!-- 热门搜索 -->
        <div class="popular_box" v-show="!isSearching">
            <h3 class="popular">热门搜索</h3>
            <div class="re_box">
                <div class="re" v-for="(item, index) in popular" :key="index">
                    {{ item }}
                </div>
            </div>
        </div>
        <!-- 结果页面 releaseTime-->
        <div class="result_box" v-show="isSearching">
            <!-- 显示搜索结果 -->
             <p>医生</p>
            <div v-for="result in searchStore.searchResultsA" :key="result.sickCircleId" class="aabox">
                <div>
                    <h5 style="font-size: 16px;">{{ result.doctorName }}</h5>
                </div>
            </div>
            <!-- 显示搜索结果 -->
             <p>药品</p>
            <div v-for="result in searchStore.searchResultsC" :key="result.sickCircleId" class="aabox">
                <div>
                    <h5 style="font-size: 16px;">{{ result.drugsName }}</h5>
                </div>
            </div>
            <!-- 显示搜索结果 -->
             <p>病症</p>
            <div v-for="result in searchStore.searchResultsB" :key="result.sickCircleId" class="aabox">
                <div>
                    <h5 style="font-size: 16px;">{{ result.diseaseName}}</h5>
                </div>
            </div>
        </div>
        <!-- <p v-if="!searchStore.searchResultsA &&!searchStore.searchResultsB &&!searchStore.searchResultsC">没有找到相关数据。</p> -->
    </div>
</template>
<script lang="ts" setup>
import { useSearchStore } from '../../stores/search2'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const searchStore:any = useSearchStore() // 获取搜索store
const isSearching = ref(false) // 控制搜索历史和结果页面的显示状态
const wd = ref('') // 存储用户输入的搜索关键词

localStorage.setItem('search', JSON.stringify(['阿胶', '小可爱医生', '感冒', '头疼', '神经病', '发烧', '癫痫', '阿莫西林', '脱发', '腿抽筋', '小儿感冒颗粒', '神经炎']))
const popular = JSON.parse(localStorage.getItem('search') as string)
console.log(popular);


//返回
const fanhui = () => {
    router.push('/')
}
// 空状态
const flag=ref(false)

// 当用户执行搜索时调用的方法
function onSearch() {
    console.log('ass', wd.value.trim());
    if (wd.value.trim()) {
        isSearching.value = true;
        searchStore.handleSearch(wd.value);
        console.log(searchStore.searchHistory, '14236432');
        // console.log(localStorage.getItem('searchHistory'), 'searchHistory');
    } else {
        isSearching.value = false;
        searchStore.searchResults = null;
    }
}
// 监听搜索框内容的变化
watch(wd, (newValue, oldValue) => {
    if (!newValue.trim()) {
        isSearching.value = false // 切换到历史页面
        searchStore.searchResults = null // 清空搜索结果
    }
})
//取消
function quxaio(history: string) {
    searchStore.removeSearchHistory(history)
}
</script>
